<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            padding: 50px 0;
        }

        .header,
        .bottom {
            height: 50px;
            background-color: gold;
            text-align: center;
            line-height: 50px;
            color: red;
            position: fixed;
            width: 100%;

        }

        .header {
            top: 0;
        }

        .bottom {
            bottom: 0;
        }

        .table {
            width: 100%;
            border: 1px solid #666;
        }

        td,
        th {
            border: 1px solid #666;
        }

        .nav ul {
            list-style: none;
            padding-left: -20px;
            overflow: hidden;
        }

        .nav li {
            float: left;
        }

        .router-link-active {
            background-color: red;
            color: gold;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="header">
            黑马程序员-前端19期-品牌管理案例（究极进化版）
        </div>
        <div class="nav">
            <ul>
                <li>
                    <router-link to="/index">首页</router-link>
                </li>
                <li>
                    <router-link to="/add">添加</router-link>
                </li>
            </ul>
        </div>
        
        <router-view></router-view>

        <div class="bottom">
            黑马程序员-前端19期 版权所有Copyright 2018-3018
        </div>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/vue-router/dist/vue-router.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
    <script src="./node_modules/moment/moment.js"></script>
    <script>

        Vue.filter("dateformat", function (value, pattern) {
            //将value字符串进行日期格式化之后返回结果
            return moment(value).format(pattern);
        })

        //1. 网站有多少个页面（要创建多少个组件）
        // 1. 首页（列表页）
        // 2. 添加页
        // 3. 修改页
        // 4. 详情页

        //2. 路由规则想明白
        //3. ajax请求用哪个库


        // 实现步骤：
        // 1. 将页面的基本解构搭建起来（设定好路由规则，能够通过不同的hash访问不同的页面）

        // 1.1 创建页面（组建模板）
        // 首页 (数据列表展示)
        let Home = {
            template: `<div><table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Index</th>
                        <th>Brand Name</th>
                        <th>Create Time</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in brandList" :key="index">
                        <td>{{index + 1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime | dateformat("YYYY赵MM春DD明 HH:mm:ss")}}</td>
                        <td>
                            <button class="btn btn-danger" @click="del(item._id)">删除</button>
                            <router-link tag="button" :to="'/detail?id=' + item._id">查看详情</router-link>
                        </td>
                    </tr> 
                    
                </tbody>
            </table></div>`,
            data() {
                return {
                    brandList: []
                }
            },
            created() {
                this.getData();
            },
            methods: {
                getData() {
                    axios({
                        url: "http://localhost:9999/api/getprodlist"
                    }).then(res => {
                        this.brandList = res.data.data;
                    })
                },
                del(id) {
                    axios({
                        url: "http://localhost:9999/api/delproduct/" + id
                    }).then(res => {
                        this.getData();
                    })
                }
            }
        }

        // 添加页
        let Add = {
            template: `<div><h1>添加页</h1><div>
            <label class="sr-only">请输入品牌名称</label>
            <input type="text" @keyup.enter="add" v-model="brandName" class="form-control"  placeholder="品牌名称">

            <button class="btn btn-default" @click.prevent="add">添加</button>
            <br></div></div>`,
            data() {
                return {
                    brandName: ""
                }
            },
            methods: {
                add() {
                    if (this.brandName.trim() == "") {
                        alert("请输入品牌名称");
                        return;
                    }
                    axios({
                        url: "http://localhost:9999/api/addproduct",
                        method: "post",
                        data: { name: this.brandName }
                    }).then(res => {
                        this.brandName = "";
                        //添加完成之后要进行页面的跳转
                        // this.$route.push
                        this.$router.push("/");
                    })
                }
            }
        }

        // 详情页
        let Detail = {
            template: "<div><h1>详情页</h1> <div>{{brand.name}}</div></div>",
            data() {
                return {
                    brand: {}
                }
            },
            created() {
                // this.$route.query.id
                this.getData();
            },
            methods: {
                getData() {
                    axios({
                        url: "http://localhost:9999/api/getprodlist"
                    }).then(res => {
                        this.brand = res.data.data.find(v => {
                            return v._id == this.$route.query.id
                        })
                    })
                }
            }
        }

        // 修改页
        /* let Edit = {
            template: "<div>修改页</div>"
        } */

        // 搜索页
        // let Search = {
        //     template: "<div>搜索页</div>"
        // }

        //1.2 路由规则的设置
        let router = new VueRouter({
            routes: [
                {
                    path: "/",
                    redirect: "/index"
                },
                {
                    path: "/index",
                    component: Home
                },
                {
                    path: "/add",
                    component: Add
                },
                // {
                //     path: "/edit",
                //     component: Edit
                // },
                {
                    path: "/detail",
                    component: Detail
                },
                // {
                //     path: "/search",
                //     component: Search
                // }
            ]
        })

        var vm = new Vue({
            el: "#app",
            data: {
            },
            router
        })
    </script>
</body>

</html>